<!DOCTYPE html>
<html>
<head>
    <title>ClassDiaryTable</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../plugins/treegrid/jquery.treegrid.css">

    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../libs/validator.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../libs/jquery.validate.js"></script>
    <script src="../../libs/validate-methods.js"></script>
    <script src="../../libs/messages_zh.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>

    <script src="../../js/echarts.js"></script>
    <script src="../../js/walden.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style  >
        .printArea{
            width: 800px;
            margin: auto;
            background-color: #F5F5F5
        }
        .printTitle{
            font-size: 30px !important;
            text-align: center;
            width: 100%;
            display: block;
            font-weight: bold;
        }
        .printTitle01{
            font-size: 22px !important;
            text-align: left;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction:column;
            font-family:FangSong
        }
        .font-fold{
            font-size: 22px!important;
            text-align: left;
            font-weight: bold;
            line-height: 50px!important;
            font-family:SimHei
        }
        .font-fold01{
            font-size: 22px!important;
            text-align: left;
            font-weight: bold;
            line-height: 50px!important;
            font-family:KaiTi
        }
        .normal-para{
            text-align: left;
            font-size: 22px!important;
            text-indent: 36px;
            color:#000;
            font-family:FangSong
        }
        .echarts-container{
            width: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: row;
        }
        .echarts-col{
            /*width: 100%;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            /*display: flex;*/
            /*flex-direction:column;*/
        }
        .font-class{
            font-size: 22px!important;
            font-family:FangSong
        }
         span{
            font-size: 22px!important;
        }
    </style>
</head>
<body>
<br>
<div id="rrapp" v-cloak>
    <div>
            <el-select
                    v-model="collageValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;"
                    placeholder="请选择部门">
                <el-option
                        v-for="item in collageOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="yearValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;width: 150px"
                    placeholder="请选择学年">
                <el-option
                        v-for="item in yearOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="termValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;width: 150px"
                    placeholder="请选择学期">
                <el-option
                        v-for="item in termOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="weekValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;width: 150px"
                    placeholder="请选择教学周">
                <el-option
                        v-for="item in weekOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="dayValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;width: 150px"
                    placeholder="请选择星期几">
                <el-option
                        v-for="item in dayOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select
                    v-model="indexValue"
                    multiple
                    collapse-tags
                    size="small"
                    style="margin-left: 20px;width: 150px"
                    placeholder="请选择第几节">
                <el-option
                        v-for="item in indexOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

    </div>
    <div class="search-container">
            <div class="select-container" >
                <select  class="mySelect" id="option" >
                    <!--<option value=''>全校</option>-->
                    <!--<option value='college'>学院</option>-->
                    <!--<option value='class'>班级</option>-->
                </select>
            </div>
            <div class="select-container">
                <input type="text" class="mySelect" onfocus="WdatePicker()" id="startDate" name="startDate" placeholder="开始时间"/>
            </div>
            <div class="select-container">
                <input type="text" class="mySelect" onfocus="WdatePicker()" id="endDate" name="endDate"  placeholder="结束时间"/>
            </div>

            <div  class="btn-container">
                <a class="btn-thin" @click="query">查询</a>
            </div>
            <div class="btn-container">
                <div  class="normal-btn normal-color" onclick="setDate('1')">今日</div>
                <div  class="normal-btn normal-color" onclick="setDate('2')">本周</div>
                <div  class="normal-btn normal-color" onclick="setDate('3')">本月</div>
            </div>

            <div  class="btn-container">
                <a class="btn-thin" onclick="exportExcel()">打印</a>
            </div>
        </div>
</div>
    <!--startprint-->
<div class="printArea" id="printArea">
        <div style="width: 100%;">
            <!-- <br> -->
            <div id="printTitle" class="printTitle">
                <!--<span>-->
                    <!--滨州职业学院-->
                <!--</span>-->
                <!--<span>教学运行诊断报告</span>-->
            </div>
            <div class="printTitle01" id="line02" >
                <!--<div style="font-size: 20px!important;">-->
                    <!--&lt;!&ndash;分析日期：<span id="now" class="font-class"></span>  &ndash;&gt;-->
                    <!--滨州职业学院 :<span id="college" class="font-class">??????</span></div>-->

                <div style="font-size: 22px!important;"> <span id="startTime" class="font-class"></span>至 <span id="endTime" class="font-class"></span>，教学组织活动如下：</div>
            </div>
        </div>
        <div style="width: 100%;">

            <span class="font-fold">一、基本情况</span>

            <div class="normal-para">
                诊断时段，行政班级<span id="classTotal">?</span>个，
                在校学生<span id="studentTotal">?</span>名，
                <!--开设公共基础课<span>?</span>门，专业课<span>?</span>门，-->
                任课教师<span id="teacherTotal">?</span>人。
                <!--，其中校内专业任课教师<span>?</span>人，兼职教师<span>?</span>人-->
                <div class="normal-para">
                    诊断时段<span id="classTotal01"></span> 个行政班中，按要求准时记载的<span id="classTotal02"></span>个班。
                </div>
            </div>

            <div class="normal-para">使用单位资源分析如下：</div>
            <br>
            <br>
            <div class="echarts-container" >
                <div id="classRate" style="flex: 1.2;height: 250px;">
                    
                </div>
                <!-- <div style="flex: 0.3"></div> -->
                <div id="studentRate" style="flex: 1.2;height: 250px;">
                    
                </div>
                <!-- <div style="flex: 0.3"></div> -->
                <div id="teacherRate" style="flex: 1.2;height: 250px;">
                    
                </div>

            </div>

            <div class="font-fold">
                二、教学运行状态
            </div>
            <div class="font-fold01">
               （一）教师状态
            </div>

            <div class="normal-para">
                1.在职教职员工<span id="teacherTotal01"></span>人，其中本学期有课教师<span id="hasCourse"></span>人，无课教师<span id="noCourse"></span>人。
            </div>
            <div class="normal-para">
                2.诊断时段，共有<span id="chidaozaotui"></span>人次专任教师有迟到、早退、脱课外出等情况。
            </div>

            <div class="echarts-container">
                 <div id="noClassTeacherRate" style="flex: 1.2;height: 260px;">
                    
                 </div>
                <div id="teaLate" style="flex: 1.2;height: 260px;">
                    <div id="showRate" style="flex: 1.2;height: 260px;">
                    </div>
                </div>
                <!--<div id="teaEarly" style="flex: 1.2;height: 200px;">-->

                <!--</div>-->
            </div>
            <div class="normal-para">
               以下为迟到早退教师排名情况，望各老师注意调整时间
            </div>

            <div class="echarts-col">
                <div id="teaLateFirTen" style="height: 300px;width: 800px">
                    
                </div>
                <div id="teaEarlyFirTen" style="height:300px;width: 800px">

                </div>
            </div>
            <div class="normal-para">
                3.诊断时段，本院任课教师平均授课时长<span id="teacherTime"></span>分钟;全校任课教师平均授课时长<span id="allSchoolTeacherTime">100</span>分钟<span id="compare">低于</span>全校平均值
            </div>
           


            <div class="echarts-col" style="margin-top:20px ">
                <div  id="teacherTimeFirstTen" style="height: 300px;width: 800px">
                    。
                </div>
                <div id="teacherTimeEndTen" style="height:300px;width: 800px">

                </div>
            </div>



            <div class="font-fold">
                4. 诊断时段，<span id="classTotal03" ></span>个在校行政班级，开设有课程<span id="coureTotal"></span>门，教学进度与教学日历相符率<span id="processFit"></span>%。
            </div>

            <div class="echarts-container" >
                <div id="processFitRate" style="flex: 1.2;height: 300px;">

                </div>

            </div>

            <div class="font-fold01">
                （二）学生状态
            </div>

            <div class="normal-para">
                诊断时段，正常出勤学生<span id="chuqin">0</span>人次，请假学生<span id="qingjia">0</span>人次，病假<span id="bingjia">0</span>人次，私假<span id="sijia">0</span>人次，公假<span id="gongjia">0</span>人次，迟到<span id="chidao">0</span>人次，旷课<span id="kuangke">0</span>人次，
            </div>


             <div class="echarts-container" >
                <div id="stuAttendanceRate" style="flex: 1.2;height: 300px;">

                </div>

            </div>


            <!--<div class="echarts-container" >-->
                <!--<div id="saProfession"  style="flex: 1.2;height: 450px;">-->
                    <!---->
                <!--</div>-->
            <!--</div>-->

            <div class="echarts-col">
                <div id="prossionAttFirTen" style="height:350px;width: 800px">

                </div>
                <div id="classAttFirTen" style="height:350px;width: 800px">

                </div>
                <div id="classAttEndTen" style="height:350px;width: 800px">

                </div>
            </div>













    <!--endprint-->

        </div>
</div>
<script>


    var classRate = echarts.init(document.getElementById('classRate'));
    var studentRate = echarts.init(document.getElementById('studentRate'));
    var teacherRate = echarts.init(document.getElementById('teacherRate'));
    var showRate = echarts.init(document.getElementById('showRate'));
    var noClassTeacherRate = echarts.init(document.getElementById('noClassTeacherRate'));
    var teaLate = echarts.init(document.getElementById('teaLate'));
    // var teaEarly = echarts.init(document.getElementById('teaEarly'));
    var teaLateFirTen = echarts.init(document.getElementById('teaLateFirTen'),'');//授课前十名
    var teaEarlyFirTen = echarts.init(document.getElementById('teaEarlyFirTen'),'');//授课后十名
    var processFitRate = echarts.init(document.getElementById('processFitRate'),'');
    var stuAttendanceRate = echarts.init(document.getElementById('stuAttendanceRate'),'');
    var prossionAttFirTen = echarts.init(document.getElementById('prossionAttFirTen'),'');
    var classAttFirTen = echarts.init(document.getElementById('classAttFirTen'),'');
    var classAttEndTen = echarts.init(document.getElementById('classAttEndTen'),'');
    var teacherTimeFirstTen = echarts.init(document.getElementById('teacherTimeFirstTen'),'');//授课前十名
    var teacherTimeEndTen = echarts.init(document.getElementById('teacherTimeEndTen'),'   ');//授课后十名




    // var chidao = echarts.init(document.getElementById('chidao'),'');//迟到
    // var zaotui = echarts.init(document.getElementById('zaotui'),'');//早退

    // var coincidenceRate = echarts.init(document.getElementById('coincidenceRate'));//教学内容相符率
    // var coincidenceRateTime = echarts.init(document.getElementById('coincidenceRateTime'));//教学内容相符率纵向比
    // var saProfession = echarts.init(document.getElementById('saProfession'));
    // var attendanceRate = echarts.init(document.getElementById('attendanceRate'),'');//到课率饼状图
    // var attendanceRateTime = echarts.init(document.getElementById('attendanceRateTime'),'');//到课率趋势图
    




    var classRateOption  = {
        title : {
            text: '行政班级占比',
            x:'center',
            left:'center'
        },
        grid:{
            y:50,
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:10, name:'本院'},
                    {value:20, name:''}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var studentRateOption  = {
        title : {
            text: '在校生占比',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var teacherRateOption  = {
        title : {
            text: '任课老师占比',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var showRateOption  = {
        title : {
            text: '显示所占比例',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var noClassTeacherRateOption  = {
        title : {
            text: '无课教师占比：',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var teaLateOption  = {
        title : {
            text: '迟到教师占比：',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // var teaEarlyOption  = {
    //     title : {
    //         text: '早退教师占比：',
    //         x:'center'
    //     },
    //     tooltip : {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         left: 'left',
    //         // data: ['优','良','差']
    //     },
    //     series : [
    //         {
    //             name: '占比',
    //             type: 'pie',
    //             // radius : '55%',
    //             // center: ['50%', '60%'],
    //             data:[
    //                 {value:335, name:'优'},
    //                 {value:310, name:'良'},
    //                 {value:234, name:'差'}
    //             ],
    //             itemStyle: {
    //                 emphasis: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                 }
    //             }
    //         }
    //     ]
    // };
    var  teaLateFirTenOption = {
        title: {
            text: '教师迟到前十名',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
        },
        series: [
            {
                name: '迟到',
                type: 'bar',
                barWidth: 20,//固定柱子宽度
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    var  teaEarlyFirTenOption = {
        title: {
            text: '教师早退前十名',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
        },
        series: [
            {
                name: '早退',
                type: 'bar',
                barWidth: 20,//固定柱子宽度
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    var processFitRateOption = {
        title : {
            text: '教学进度与教学日历相符率',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var stuAttendanceRateOption= {
        title : {
            text: '学生到课率占比',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            // data: ['优','良','差']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var prossionAttFirTenOption  = {
        title: {
            text: '专业到课排行',
            subtext: '前十名'
        },
        tooltip: {
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        ]
    };
    var classAttFirTenOption  = {
        title: {
            text: '班级到课率排行前十名',
            subtext: '前十名'
        },
        tooltip: {
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        ]
    };
    var classAttEndTenOption = {
        title: {
            text: '班级到课率排行后十名',
            subtext: '前十名'
        },
        tooltip: {
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        ]
    };
    var teacherTimeFirstTenOption = {
        title: {
            text: '平均授课时长前十名的教师：',
            subtext: '前十名'
        },
        tooltip: {
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        ]
    };
    var teacherTimeEndTenOption = {
        title: {
            text: '平均授课时长后十名的教师',
            subtext: '后十名'
        },
        tooltip: {
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'授课时长',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        ]
    };

    window.onresize = function(){
        // chidao.resize()
        // zaotui.resize()
    }

    function setclassRateOption(r) {
        var v=r.data.classTotal
        var v1=r.data.allClassTotal-r.data.classTotal;
        classRateOption.series[0].data=[
            {value:v, name:'本院'},
            {value:v1, name:'其余院系'}]
    }
    function setStudentRate(r) {
        var v=r.data.studentTotal
        var v1=r.data.allstudentTotal-r.data.studentTotal;
        studentRateOption.series[0].data=[
            {value:v, name:'本院'},
            {value:v1, name:'其余院系'}]
}
    function setTeacherRate(r) {
        var v=r.data.teacherTotal
        var v1=r.data.allteacherTotal-r.data.teacherTotal;
        teacherRateOption.series[0].data=[
            {value:v, name:'本院'},
            {value:v1, name:'其余院系'}]
    }
    function getSeries(data) {
        var     series=
            {
                name:'授课时长',
                type:'bar',
                data:data,
                barWidth : 30,//柱图宽度
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                // markLine: {
                //     data: [
                //         {type: 'average', name: '平均值'}
                //     ]
                // }
            }
        return series;
    }
    function exportExcel() {
        var bdhtml=window.document.body.innerHTML;

      $('#classRate').html(setHtml('classRate'));setImg('#classRate');
      $('#studentRate').html(setHtml('studentRate'));setImg('#studentRate');
      $('#teacherRate').html(setHtml('teacherRate'));setImg('#teacherRate');
      $('#showRate').html(setHtml('showRate'));setImg('#showRate');
      $('#noClassTeacherRate').html(setHtml('noClassTeacherRate'));setImg('#noClassTeacherRate');
      $('#teaLate').html(setHtml('teaLate'));setImg('#teaLate');
      // $('#teaEarly').html(setHtml('teaEarly'));
        $('#teacherTimeFirstTen').html(setHtml('teacherTimeFirstTen'));setImg('#teacherTimeFirstTen');
        $('#teacherTimeEndTen').html(setHtml('teacherTimeEndTen'));setImg('#teacherTimeEndTen');
        $('#prossionAttFirTen').html(setHtml('prossionAttFirTen'));setImg('#prossionAttFirTen');

      $('#teaLateFirTen').html(setHtml('teaLateFirTen'));setImg('#teaLateFirTen');
      $('#teaEarlyFirTen').html(setHtml('teaEarlyFirTen'));setImg('#teaEarlyFirTen');
      $('#processFitRate').html(setHtml('processFitRate'));setImg('#processFitRate');
      $('#stuAttendanceRate').html(setHtml('stuAttendanceRate'));setImg('#stuAttendanceRate');
      $('#studentAttendenceChartFirstTen').html(setHtml('studentAttendenceChartFirstTen'));setImg('#studentAttendenceChartFirstTen');
      $('#studentAttendenceChartEndTen').html(setHtml('studentAttendenceChartEndTen'));setImg('#studentAttendenceChartEndTen');
      $('#classAttFirTen').html(setHtml('classAttFirTen'));setImg('#classAttFirTen');
      $('#classAttEndTen').html(setHtml('classAttEndTen'));setImg('#classAttEndTen');
        var prnhtml=document.getElementById('printArea').innerHTML;
        window.document.body.innerHTML=prnhtml;
        window.print();
      //  window.document.body.innerHTML=bdhtml;
       // window.reload()
    }
    $(function () {
        $.ajax({
            url: baseURL + "/college/getAllStudentCollege",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        // classRate.setOption(classRateOption)
        // studentRate.setOption(studentRateOption)
        // teacherRate.setOption(showRateOption)
        // showRate.setOption(teacherRateOption)
        // noClassTeacherRate.setOption(noClassTeacherRateOption);
        // teaLate.setOption(teaLateOption)
        // teaEarly.setOption(teaEarlyOption)
        // teaLateFirTen.setOption(teaLateFirTenOption)
        // teaEarlyFirTen.setOption(teaEarlyFirTenOption)
        // processFitRate.setOption(processFitRateOption)
        // stuAttendanceRate.setOption(stuAttendanceRateOption)
        // classAttFirTen.setOption(classAttFirTenOption)
        // classAttEndTen.setOption(classAttEndTenOption)
        // studentAttendenceChartFirstTen.setOption(firstTenOption);
        // studentAttendenceChartEndTen.setOption(endTenOption);
        //setDate('3')
    });
    function getQingjia(list) {
        var sijia=getJia('私假',list)
        var gongjia=getJia('公假',list)
        var bingjia=getJia('病假',list)
        return sijia+gongjia+bingjia;
    }
    function getJia(str,list) {
        for(var i=0;i<list.length;i++)
        {
            if(list[i].name==str) return list[i].value
        }
        return 0;
    }
    function goString(data){
            var temp=""
            for(let i in data){
                if(i==data.length-1){
                    temp+=('\''+data[i]+'\'')
                }else{
                    temp+=('\''+data[i]+'\'')+','
                }
            }
            return temp
    }

    var vm = new Vue({
        el:'#rrapp',
        data:{
              collageData:null,
              yearData:null,
              termData:null,
              weekData:null,
              dayData:null,
              indexData:null,
              collageValue:[],
              yearValue:[],
              termValue:[],
              weekValue:[],
              dayValue:[],
              indexValue:[],
              collageOptions:[],
              yearOptions:[],
              termOptions:[],
              weekOptions:[],
              dayOptions:[],
              indexOptions:[],
            q:{
                key: null,
                startDate:null,
                endDate:null
            },
            showList: true,
            title: null,
            ClassDiary: {},
            diaryPostTime: null,
            term: {}
        },
        mounted(){
             $.ajax({
                url: baseURL + "/college/getAllcollege",
                data: {},
                success: function (r) {
                    for (i = 0; i < r.list.length; i++) {
                        var tempJson={
                            'value':r.list[i].collegeName,
                            'label':r.list[i].collegeName
                        }
                        vm.collageOptions.push(tempJson)
                    }
                }
            });
            $.ajax({
                url: baseURL + "/term/getSchoolTerm",
                data: {},
                success: function (r) {
                    for (i = 0; i < r.list.length; i++) {
                         var tempJson={
                            'value':r.list[i].schoolAcademicYear,
                            'label':r.list[i].schoolAcademicYear
                        }
                        vm.yearOptions.push(tempJson)
                    }
                }
             });
             var listTerm=["1","2"];
             for (i = 0; i < listTerm.length; i++) {
                var tempJson={
                    'value':listTerm[i],
                    'label':"第"+listTerm[i]+"学期"
                }
                this.termOptions.push(tempJson)
             }
             for (i = 1; i < 21; i++) {
                var tempJson={
                    'value':i,
                    'label':"第"+i+"周"
                }
                this.weekOptions.push(tempJson)
             }
             for (i = 1; i < 8; i++) {
               var tempJson={
                    'value':i,
                    'label':"星期"+i
                }
                this.dayOptions.push(tempJson)
             }
             for (i = 1; i < 11; i+=2) {
                var tempJson={
                    'value':i,
                    'label':"第"+i+"节"
                }
                this.indexOptions.push(tempJson)
             }
        },

        methods: {
            goString:function (data){
                var temp=""
                for(let i in data){
                    if(i==data.length-1){
                        temp+=('\''+data[i]+'\'')
                    }else{
                        temp+=('\''+data[i]+'\'')+','
                    }
                }
                return temp
            },
            query: function () {
                vm.collageData=goString(vm.collageValue);
                vm.yearData=goString(vm.yearValue);
                vm.termData=goString(vm.termValue);
                vm.weekData=goString(vm.weekValue);
                vm.dayData=goString(vm.dayValue);
                vm.indexData=goString(vm.indexValue);
                $.ajax({
                    url: baseURL + "/report/getZhenduanReport",
                    data: {
                        "collegeName":vm.collageData,
                        "academicYear":vm.yearData,
                        "academicTerm":vm.termData,
                        "academicWeek":vm.weekData,
                        "academicDay":vm.dayData,
                        "academicIndex":vm.indexData,
                        'startDate':$('#startDate').val(),
                        'endDate':$('#endDate').val(),
                   },
                    success: function (r) {
                        $('#printTitle').html(
                            `
                        滨州职业学院${$('#startDate').val()}至${$('#endDate').val()}

                    <br>教学运行诊断报告`
                        );
                        $('#now').html(new Date().toLocaleDateString());
                        $('#college').html($("#option").val());
                        $('#startTime').html($("#startDate").val());
                        $('#endTime').html($("#endDate").val());

                        $('#studentTotal').html(r.data.studentTotal);
                        $('#classTotal').html(r.data.classTotal);
                        $('#classTotal01').html(r.data.classTotal);
                        $('#classTotal02').html(r.data.classTotal);
                        $('#classTotal03').html(r.data.classTotal);
                        $('#teacherTotal').html(r.data.teacherTotal);

                        setclassRateOption(r);
                        setStudentRate(r);
                        setTeacherRate(r);
                        $('#hasCourse').html(r.data.hasCourse[0].value);
                        $('#noCourse').html(r.data.hasCourse[1].value);
                        noClassTeacherRateOption.series[0].data=r.data.hasCourse
                        teaLateOption.series[0].data=r.data.teacherAttendancePie
                        var chidaozaotui=parseInt(r.data.teacherAttendancePie[1].value)+parseInt(r.data.teacherAttendancePie[2].value);
                        $('#chidaozaotui').html(chidaozaotui);
                            teaLateFirTenOption.yAxis.data=r.data.chidao.xData;
                        teaLateFirTenOption.series[0].data=r.data.chidao.seriesData;
                        teaEarlyFirTenOption.yAxis.data=r.data.zaotui.xData;
                        teaEarlyFirTenOption.series[0].data=r.data.zaotui.seriesData;
                        $('#teacherTime').html(r.data.teacherTime.toFixed(2));
                        $('#allSchoolTeacherTime').html(r.data.allSchoolTeacherTime.toFixed(2));
                        if(r.data.teacherTime.toFixed(2)>=r.data.allSchoolTeacherTime.toFixed(2)){
                            $('#compare').html('高于');
                        }else{
                            $('#compare').html('低于');
                        }
                        teacherTimeFirstTenOption.xAxis.data=r.data.rank.classNamesFirstTen;
                        teacherTimeFirstTenOption.series=getSeries(r.data.rank.rateFirstTen);

                        teacherTimeEndTenOption.xAxis.data=r.data.rank.classNamesEndtTen;
                        teacherTimeEndTenOption.series=getSeries(r.data.rank.rateEndTen);
                        $('#coureTotal').html(r.data.coureTotal);
                        var processFit=r.data.xiangfuRate[0].value/(r.data.xiangfuRate[0].value+r.data.xiangfuRate[1].value)*100
                        $('#processFit').html(processFit);
                        processFitRateOption.series[0].data=r.data.xiangfuRate;
                        processFitRate.setOption(processFitRateOption);
                        $('#chuqin').html(getJia('出勤',r.data.coincidenceRate.series));
                        $('#qingjia').html(getQingjia(r.data.coincidenceRate.series));
                        $('#sijia').html(getJia('私假',r.data.coincidenceRate.series));
                        $('#gongjia').html(getJia('公假',r.data.coincidenceRate.series));
                        $('#bingjia').html(getJia('病假',r.data.coincidenceRate.series));
                        $('#kuangke').html(getJia('旷课',r.data.coincidenceRate.series));
                        $('#chidao').html(getJia('迟到',r.data.coincidenceRate.series));
                        stuAttendanceRateOption.series[0].data=r.data.coincidenceRate.series;
                       // stuAttendanceRateOption.legend.data=r.data.coincidenceRate.legend;
                        stuAttendanceRate.setOption(stuAttendanceRateOption);

                        prossionAttFirTenOption.xAxis.data=r.data.pressionRate.classNamesFirstTen;
                        prossionAttFirTenOption.series=getSeries(r.data.pressionRate.rateFirstTen);


                        classAttFirTenOption.xAxis.data=r.data.ClassRate.classNamesFirstTen;
                        classAttFirTenOption.series=getSeries(r.data.ClassRate.rateFirstTen);

                        classAttEndTenOption.xAxis.data=r.data.ClassRate.classNamesEndtTen;
                        classAttEndTenOption.series=getSeries(r.data.ClassRate.rateEndTen);

                        classRate.setOption(classRateOption)
                        studentRate.setOption(studentRateOption)
                        teacherRate.setOption(teacherRateOption)
                        showRate.setOption(showRateOption)
                        noClassTeacherRate.setOption(noClassTeacherRateOption);
                        teaLate.setOption(teaLateOption)
                        // teaEarly.setOption(teaEarlyOption)
                        teaLateFirTen.setOption(teaLateFirTenOption)
                        teaEarlyFirTen.setOption(teaEarlyFirTenOption)
                        prossionAttFirTen.setOption(prossionAttFirTenOption)
                        stuAttendanceRate.setOption(stuAttendanceRateOption)
                        classAttFirTen.setOption(classAttFirTenOption)
                        classAttEndTen.setOption(classAttEndTenOption)
                        teacherTimeFirstTen.setOption(teacherTimeFirstTenOption);
                        teacherTimeEndTen.setOption(teacherTimeEndTenOption);

                    }
                });



            },
            add: function(){
                vm.showList = false;
                vm.title = "新增";
                vm.ClassDiary = {};
            },
            update: function () {
                var id = getSelectedRow();
                if(id == null){
                    return ;
                }
                $.get(baseURL + "ClassDiaryTable/Info/"+id, function(r){
                    vm.showList = false;
                    vm.title = "修改";
                    vm.ClassDiary = r.ClassDiary;
                    vm.diaryPostTime = r.ClassDiary.diaryPostTime;
                });
            },
            del: function () {
                var ids = getSelectedRows();
                if(ids == null){
                    return ;
                }
                confirm('确定要删除选中的记录？', function(){
                    $.ajax({
                        type: "POST",
                        url: baseURL + "ClassDiary/Delete",
                        contentType: "application/json",
                        data: JSON.stringify(ids),
                        success: function(r){
                            if(r.code == 0){
                                alert('操作成功', function(){
                                    vm.reload();
                                });
                            }else{
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            saveOrUpdate: function () {
                if(vm.validator()){
                    return ;
                }

                var url = vm.ClassDiary.diaryPostTime == vm.diaryPostTime ? "ClassDiaryTable/Update" : "ClassDiaryTable/Insert";
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.ClassDiary),
                    success: function(r){
                        if(r.code === 0){
                            alert('操作成功', function(){
                                vm.reload();
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            },
            reload: function () {
            },
            validator: function () {
                if(isBlank(vm.ClassDiary.diaryPostTime)){
                    alert("考评时间不能为空");
                    return true;
                }
                if(isBlank(vm.ClassDiary.courseTeacherName)){
                    alert("教师姓名不能为空");
                    return true;
                }
                if(isBlank(vm.ClassDiary.courseName)){
                    alert("课程名称不能为空");
                    return true;
                }
                if(isBlank(vm.ClassDiary.arriveTime)){
                    alert("到达时间不能为空");
                    return true;
                }
                if(isBlank(vm.ClassDiary.leaveTime)){
                    alert("离开时间不能为空");
                    return true;
                }
                if(isBlank(vm.ClassDiary.teachLength)){
                    alert("教授时长不能为空");
                    return true;
                }
            }
        }
    });


    function setHtml(id) {
        var img=getFullCanvasDataURL(id)

        var imgdiv='<img  src="'+img+'"/>';
        return imgdiv;
    }
    function setImg(id) {
     $(id).css('height',$(id +' img').height())
    }
    function getFullCanvasDataURL(divId){
        //将第一个画布作为基准。
        var baseCanvas = $("#"+divId).find("canvas").first()[0];
        if(!baseCanvas){
            return false;
        };
        var width = baseCanvas.width;
        var height = baseCanvas.height;
        var ctx = baseCanvas.getContext("2d");
        //遍历，将后续的画布添加到在第一个上
        $("#"+divId).find("canvas").each(function(i,canvasObj){
            if(i>0){
                var canvasTmp = $(canvasObj)[0];
                ctx.drawImage(canvasTmp,0,0,width,height);
            }
        });
        //获取base64位的url
        return baseCanvas.toDataURL();
    }
</script>
</body>
</html>